<template>
  <div
    class="w-screen lg:flex lg:justify-center lg:items-center bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-slate-100 via-blue-100 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
    <div class="w-full flex flex-col lg:w-1/2">
      <!-- 顶部盒子 -->
      <div class="w-full h-full">
        <HomePageTopEle />
      </div>


      <!-- 头像区域 这一部分打算放在关于我页面 -->
      <!-- <div class="w-full mt-24">
        <div class="max-w-6xl mx-auto px-4">
          <div class="flex flex-col items-center justify-center gap-8">
            <div class="w-full flex flex-col items-center">
              <div class="transform hover:scale-105 transition-transform duration-300">
                <el-avatar :size="200"
                  src="https://tse3-mm.cn.bing.net/th/id/OIP-C.xzfpkJdhfQ8AEGsz6fxe2QAAAA?rs=1&pid=ImgDetMain"
                  class="border-4 border-white dark:border-gray-700 shadow-md" />
              </div>
              <h2 class="mt-6 text-2xl font-bold text-gray-800 dark:text-gray-100 tracking-wide">{{ blogConfig.name }}
              </h2>
              <p class="mt-2 text-gray-500 dark:text-gray-300">{{ blogConfig.description }}</p>
            </div>

            <div class="flex w-full justify-center">
    
              <a href="/status/NotFound">
                <v-icon
                  class="hover:scale-150 transition-transform duration-300 dark:text-gray-400 dark:hover:text-gray-300"
                  name="bi-github" scale="2" />
              </a>

              <a href="mailto:wzy9858@qq.com" target="_blank" />
              <a href="/status/NotFound">
                <v-icon
                  class="hover:scale-150 transition-transform duration-300 ml-4 dark:text-gray-400 dark:hover:text-gray-300"
                  name="ri-wechat-fill" scale="2" />
              </a>
              <a href="mailto:wzy9858@qq.com" target="_blank" />
              <a href="/status/NotFound">
                <v-icon
                  class="hover:scale-150 transition-transform duration-300 ml-4 dark:text-gray-400 dark:hover:text-gray-300"
                  name="md-email" scale="2" />
              </a>

            </div>
          </div>
        </div>
      </div> -->
      <!-- 公告横条 -->
      <div class="w-full flex items-center group mt-3">
        <div
          class="h-[1px] flex-1 bg-gradient-to-r from-transparent via-blue-400/60 dark:via-blue-600 to-transparent transition-all duration-500 group-hover:via-blue-600 dark:group-hover:via-blue-400">
        </div>
        <div class="mx-4 whitespace-nowrap flex items-center">
          <span
            class="text-blue-600 bg-blue-50 dark:bg-blue-900 dark:text-blue-200 px-3 py-1 rounded-full text-sm font-medium ring-1 ring-inset ring-blue-100 dark:ring-blue-800">
            <span class="mr-2">📢</span>公告
          </span>
        </div>
        <div
          class="h-[1px] flex-1 bg-gradient-to-l from-transparent via-blue-400/60 dark:via-blue-600 to-transparent transition-all duration-500 group-hover:via-blue-600 dark:group-hover:via-blue-400">
        </div>
      </div>
      <!-- 消息轮播 -->
      <el-carousel :interval="4000" type="" height="240px" class="m-4" arrow="always"
        :class="AnnouncementList.length === 0 ? 'loader' : ''">

        <el-carousel-item v-for="(item, index) in AnnouncementList" :key="index" class="group"
          @click="informDialog(item)">
          <div
            class=" flex flex-col items-center justify-center h-full p-6 bg-white bg-opacity-95 dark:bg-gray-800 dark:bg-opacity-90 rounded-lg shadow-lg hover:shadow-xl dark:shadow-gray-800/50 transition-all duration-300">
            <svg
              class="w-8 h-8 mb-4 text-purple-500 dark:text-purple-400 transform transition-all duration-300 group-hover:rotate-12"
              fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
            </svg>
            <div class="text-center space-y-2">
              <p class="text-xs font-semibold text-purple-600 dark:text-purple-400 uppercase tracking-wide">
                通知
              </p>
              <div
                class="text-sm md:text-base text-gray-700 dark:text-gray-200 leading-snug whitespace-normal break-words line-clamp-3"
                v-html="item.title">
              </div>
              <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">
                {{ index + 1 }}/{{ AnnouncementList.length }}
              </p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>

      <div>
        <SystemFunction />
      </div>

      <div>
        <ApiInterface />
      </div>

      <div>
        <Game />
      </div>

      <div>
        <explore />
      </div>

      <div class="mb-12"></div>


    </div>
  </div>

  <!-- 通知框弹出 -->
  <el-dialog v-model="showAnnouncementDialogue" width="auto" class="max-w-4xl mx-auto">
    <template #footer>
      <div class="bg-white dark:bg-gray-800  p-6 rounded-lg shadow-lg">
        <div class="text-lg font-bold text-gray-800 dark:text-white mb-4 text-center" v-html="oneAnnoucement?.title">
        </div>
        <!-- 支持html展示 -->
        <div class="text-gray-600 dark:text-gray-300 text-sm text-center" v-html="oneAnnoucement?.content"></div>
      </div>
    </template>
  </el-dialog>
  <div v-if="showAnnouncementDialogue"
    class="fixed inset-0 z-10 backdrop-blur-sm bg-white dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-50"></div>
  <MainAside />
</template>
<script setup lang="ts">
import ApiInterface from "../../components/main/home/ApiInterface.vue";
import Game from "../../components/main/home/Game.vue";
import Explore from "../../components/main/home/Explore.vue";
import HomePageTopEle from "../../components/main/HomePageTopEle.vue";
import SystemFunction from "../../components/main/home/SystemFunction.vue";
import { ref, onMounted } from "vue";
import MainAside from "../../components/main/MainAside.vue";

// import { useLoadingStore } from "../../ts/pinia";
// const loadingStore = useLoadingStore()
// --------------------------------------------------------------系统自带方法-----------------------
onMounted(async () => {

  // AnnouncementList.value = await getAnnouncementList() //返回的就是个列表
  // getAnnouncementList().then( //拿到公告列表的方法
  //   s => {
  //     AnnouncementList.value = s.data.list
  //   }
  // ).catch()


});

// -------------------------------公告的相关方法--------------------------------------------------
const showAnnouncementDialogue = ref(false)//公告对话框是否打开

function informDialog(item: any) { //点击了公告的范围 就展开对话框
  oneAnnoucement.value = item
  showAnnouncementDialogue.value = !showAnnouncementDialogue.value
}
// 已进入页面公告就展示
// import { getAnnouncementList } from "../../ts/axios/system";
import type { AnnouncementInter } from "../../ts/types/systemInstance";
let oneAnnoucement = ref<AnnouncementInter>() //打开的那个公告
let AnnouncementList = ref<AnnouncementInter[]>([]);
// 下面应该通过请求结果获得
AnnouncementList.value =  [
            {
                "id": 1,
                "title": "开发环境公告",
                "content": "这是一个测试公告",
                "createdAt": "2025-06-14T02:04:38.000+00:00",
                "updatedAt": "2025-06-15T00:39:54.000+00:00",
                "publishStatus": "draft",
                "views": 0
            },
            {
                "id": 2,
                "title": "测试成功",
                "content": "服务测试成功，即将上线",
                "createdAt": "2025-06-14T02:05:08.000+00:00",
                "updatedAt": "2025-06-14T02:05:08.000+00:00",
                "publishStatus": "draft",
                "views": 0
            }
        ]



</script>

<style scoped></style>